<script setup lang="ts">
import {
  ElButton,
  ElCard,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRadio,
  ElRadioGroup,
  ElRow,
} from "element-plus";
import { ProInputNumber, ProSelect } from "@/modules/package/form";
import UploaderSingle from "@/components/common/UploaderSingle.vue";

import { useRoute } from "vue-router";
import useEnum from "@/hooks/useEnum";
import useForm from "@/hooks/useForm";
import useRequest from "@/hooks/useRequest";
import ApiCoupon from "@/api/coupon";
import router from "@/router";

import { TCoupon } from "@/global";
import {
  EnumCouponCategory,
  EnumCouponStatus,
  EnumCouponType,
} from "@/utils/enum";
import { computed } from "vue";

const { params } = useRoute();

const { get: getCategory } = useEnum("EnumCouponCategory");

const rules = {
  coupon_name: [{ required: true, message: "请输入票券标题" }],
  coupon_code: [{ required: true, message: "请输入票券编码" }],
  coupon_subname: { required: true, message: "请输入票券副标题" },
  coupon_type: { required: true, message: "请选择票券类型" },
  coupon_category: { required: true, message: "请选择票券子类型" },
  status: { required: true, message: "请选择票券状态" },
  sort: { required: true, message: "请选择排序值" },
  coupon_desc: { required: true, message: "请输入票券说明" },
};

// 编辑模式：获取目标票券详情
const { data, isFetching, onFetchResponse } = useRequest<{ detail: TCoupon }>(
  ApiCoupon.detail,
  { immediate: !!params.id, defaultParams: { id: +params.id } }
);

// 提交表单：编辑 | 新建
const {
  refForm,
  isFetching: isFetchingForm,
  model,
  reset,
  submit,
  onFetchResponse: onFetchResponseForm,
} = useForm<Partial<TCoupon>>(params.id ? ApiCoupon.modify : ApiCoupon.add, {
  defaultModel: {
    sort: 255,
    coupon_num: 0,
    coupon_img: "",
    // coupon_category: Number(query.category)
  },
});

// 加载详情成功
onFetchResponse(() => {
  // 设置表单数据
  model.value = data.value!.detail;
});

// 表单设置成功
onFetchResponseForm(() => {
  ElMessage.success("操作成功！");
  router.go(-1);
});

// 根据coupon_type 返回对应的票券子类型
const renderCouponCategoryList = computed(() => {
  const { coupon_type: val } = model.value;
  return EnumCouponCategory.filter(
    (e) => !e.disabled && val && e.linkTypeValue?.includes(val)
  );
});
</script>

<template>
  <div class="mx-auto w-full">
    <ElForm
      ref="refForm"
      label-width="7em"
      :model="model"
      :rules="rules"
      v-loading="isFetching"
      element-loading-text="正在加载票券详情"
    >
      <ElCard header="创建票券">
        <ElRow :gutter="16">
          <ElCol :span="12">
            <ElFormItem label="票券标题" prop="coupon_name">
              <ElInput
                v-model="model.coupon_name"
                placeholder="输入票券标题"
                maxlength="24"
                show-word-limit
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="券副标题" prop="coupon_subname">
              <ElInput
                v-model="model.coupon_subname"
                placeholder="输入券券副标题"
                maxlength="24"
                show-word-limit
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="票券类型" prop="coupon_type">
              <ProSelect
                v-model="model.coupon_type"
                :options="EnumCouponType"
                placeholder="请选择"
                @change="model.coupon_category = undefined"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="票券子类型" prop="coupon_category">
              <ProSelect
                v-model="model.coupon_category"
                :options="renderCouponCategoryList"
                placeholder="请选择"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="票券图标" prop="coupon_img">
              <UploaderSingle v-model="model.coupon_img" />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="票券编码" prop="coupon_code">
              <ElInput
                v-model="model.coupon_code"
                placeholder="输入票券编码"
                maxlength="24"
                show-word-limit
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="启用状态" prop="status">
              <ElRadioGroup v-model="model.status">
                <ElRadio
                  v-for="item in EnumCouponStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem
              v-if="
                model.coupon_category &&
                [2, 3, 6].includes(model.coupon_category)
              "
              label="票券面值"
              prop="coupon_num"
              :rules="{ required: true, message: '请输入票券面值' }"
            >
              <ProInputNumber
                v-model="model.coupon_num"
                :min="0"
                :precision="2"
                :max="[2, 6].includes(model.coupon_category) ? 100 : undefined"
              />

              <span class="pl-3">
                {{ getCategory(model.coupon_category, "unit") }}
              </span>
            </ElFormItem>
          </ElCol>

          <ElCol :span="12">
            <ElFormItem label="排序" prop="sort">
              <ProInputNumber
                v-model="model.sort"
                :precision="0"
                :min="1"
                :max="9999"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="24">
            <ElFormItem label="票券说明" prop="coupon_desc">
              <ElInput
                v-model="model.coupon_desc"
                placeholder="票券说明"
                type="textarea"
                :rows="6"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="24">
            <ElFormItem label="备注">
              <ElInput
                v-model="model.remark"
                placeholder="备注"
                type="textarea"
                :rows="4"
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="24" class="text-center">
            <ElButton :loading="isFetchingForm" @click="reset">重置</ElButton>
            <ElButton type="primary" :loading="isFetchingForm" @click="submit"
              >保存</ElButton
            >
          </ElCol>
        </ElRow>
      </ElCard>
    </ElForm>
  </div>
</template>
